<template>
  <div class="xinzeng">
    <h4>新增人员</h4>
    <div class="int">
        <el-form :model="ruleForm" 
        label-width="120px" 
        :rules="rules"
        ref="ruleFormRef"
        status-icon
        >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="ruleForm.name" width="200px"  placeholder="请输入姓名"/>
            </el-form-item>
            <el-form-item label="性别" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio label="男" />
                  <el-radio label="女" />
                </el-radio-group>
              </el-form-item> 
            <el-form-item label="手机号码"  prop="shoujihao">
                <el-input v-model="ruleForm.shoujihao"  placeholder="请输入手机号"/>
              </el-form-item>
              <el-form-item label="工号"  prop="gonghao">
                <el-input v-model="ruleForm.gonghao" placeholder="请输入工号"/>
              </el-form-item>
              <el-form-item label="证件号码"  prop="zhengjianbiaohao">
                <el-input v-model="ruleForm.zhengjianbiaohao"  placeholder="请输入证件号码"/>
              </el-form-item>
            <el-form-item label="岗位"  prop="gangwei">
              <el-select v-model="ruleForm.gangwei" placeholder="请选择岗位">
                <el-option label="项目经理" value="项目经理" />
                <el-option label="科室主任" value="科室主任" />
                <el-option label="副总裁" value="副总裁" />
              </el-select>
            </el-form-item>
            <el-form-item label="部门"  prop="bumen">
                <el-select v-model="ruleForm.bumen" placeholder="请选择部门">
                  <el-option label="项目部" value="项目部" />
                  <el-option label="产品部" value="产品部" />
                  <el-option label="人力资源部" value="人力资源部" />
                  <el-option label="财务部" value="财务部" />
                  <el-option label="行政部" value="行政部" />

                </el-select>
              </el-form-item>
              <el-form-item label="职务"  prop="zhiwu">
                <el-select v-model="ruleForm.zhiwu"  placeholder="请选择职务">
                  <el-option label="财务人员" value="财务人员" />
                  <el-option label="作业员" value="作业员" />
                  <el-option label="招聘专员" value="招聘专员" />
                  <el-option label="行政主任" value="行政主任" />
                </el-select>
              </el-form-item>
              <el-form-item label="工作性质"  prop="gongzuoxingzhi">
                <el-select v-model="ruleForm.gongzuoxingzhi" placeholder="请选择工作性质">
                  <el-option label="正式" value="正式" />
                  <el-option label="试用" value="试用" />
                  <el-option label="实习" value="实习" />
                  <el-option label="兼职" value="兼职" />
                </el-select>
              </el-form-item>
              <el-form-item label="试用期"  prop="shiyongqi">
                <el-select v-model="ruleForm.shiyongqi"  placeholder="请选择" class="sel">
                    <el-option label="试用" value="试用" />
                    <el-option label="实习" value="实习" />
                </el-select>
                <el-select v-model="ruleForm.yueshu"  placeholder="个月" class="sel1">
                    <el-option label="一个月" value="一个月" />
                    <el-option label="三个月" value="三个月" />
                  </el-select>
              </el-form-item>
              <el-form-item label="人员状态"  prop="zhuangtai">
                <el-select v-model="ruleForm.zhuangtai" placeholder="请选择状态">
                  <el-option label="在职" value="在职" />
                  <el-option label="离职" value="离职" />
                </el-select>
              </el-form-item>
            <el-form-item label="入职时间"  prop="ruzhiriqi">
                <el-date-picker
                v-model="ruleForm.ruzhiriqi"
                type="date"
                placeholder="请选择时间"
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD"
                style="width:450px"
              />
            </el-form-item>                
            <el-form-item>
              <el-button @click="$router.back()">返回</el-button>
              <el-button type="primary" @click="addrenyuan()">保存</el-button>
            </el-form-item>
          </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import * as request from '@/api/biao/biao'
import{useRouter} from 'vue-router'
var $router=useRouter()
var ruleFormRef=ref()
var ruleForm=ref({
    name:'',
    bumen:'',
    gangwei:'',
    shoujihao:'',
    gonghao:'',
    zhengjianbiaohao:'',
    gongzuoxingzhi:'',
    zhuangtai:'',
    ruzhiriqi:'',
    shiyongqi:'',
    yueshu:'',
    zhiwu:'',
    resource:''
})
//数据校验
var rules=ref({
    name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }, 
  ],
  bumen: [
    { required: true, message: '请选择部门', trigger: 'blur' }, 
  ],
  gangwei: [
    { required: true, message: '请选择岗位', trigger: 'blur' }, 
  ],
  shoujihao: [
    { required: true, message: '请输入手机号码', trigger: 'blur' }, 
  ],
  gonghao: [
    { required: true, message: '请输入工号', trigger: 'blur' }, 
  ],
  zhengjianbiaohao: [
    { required: true, message: '请输入证件号码', trigger: 'blur' }, 
  ],
  gongzuoxingzhi: [
    { required: true, message: '请选择工作性质', trigger: 'blur' }, 
  ],
  zhuangtai: [
    { required: true, message: '请选择状态', trigger: 'blur' }, 
  ],
  ruzhiriqi: [
    { required: true, message: '请选择入职时间', trigger: 'blur' }, 
  ],
})
var addrenyuan=async()=>{
    ruleFormRef.value.validate(async (valid) => {
if(valid){
    var res=await request.xinzeng_login(ruleForm.value)
console.log(res);
ElNotification({
  title: "通知",
  message: "新增人员成功",
  type: "success",
  duration: 2000,
 });
$router.back()
}
    } )

}

</script>

<style scoped>
.xinzeng{
  width: 100%;
}
.xinzeng h4{
    display: inline-block;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid;
    margin-bottom: 15px;
  }
  .el-input,.el-select{
    width: 450px;
  }
  .sel{
    width: 200px;
  }
  .sel1{
    width: 120px;
    margin-left: 30px;
  }
  .el-col{
    width: 450px;
  }
.int{
    width: 80%;
}
.el-button{
    width: 150px;
}
</style>